<template>
  <el-container style="height: 1150px; border: 1px solid #eee">
    <el-main>
      <router-view/>
      <el-row :gutter="20">
        <el-col :span="9">
          <el-card class="box-card" style="height:270px; padding-top: 50px">
            <el-space :size="size" :spacer="spacer">
              <div class="cardme" style=" width:220px; ">
                <p class="title1">今日咨询数</p>
                <p class="digit3">{{countToday}}</p>
              </div>
              <div class="cardme"  style=" width:220px;  ">
                <p class="title1">今日咨询时长</p>
                <p class="digit3">{{timeToday}}<span style="font-size: 12px;color: gray;font-weight: lighter;">分钟</span></p>
              </div>
            </el-space>
          </el-card>
        </el-col>
        <el-col :span="15">
          <el-card class="box-card" style="height: 320px;">
            <div id="myChart" :style="{width: '100%',height: '100%'}"></div>
          </el-card>

        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="10">
          <el-card class="box-card">
            <table>
              <tr>
                <td style="font-family: 'Microsoft YaHei', sans-serif;font-weight: bold ">在线咨询师 </td>
                <td style="width: 90px;">&nbsp;</td>
                <td><el-pagination
                    background
                    layout="prev, pager, next"
                    :total="dataList2.length"
                    :page-size="pageSize2"
                    @current-change="paging2"
                >
                </el-pagination></td>
              </tr>
            </table>
            <el-table :data="dataList2.slice((currentPage2-1)*pageSize2,currentPage2*pageSize2)" max-height="160">
              <el-table-column  prop="userAvatar" width="50" align="center">
                <template #default="scope" >
                  <el-avatar :src="scope.row.userAvatar"></el-avatar>
                </template>
              </el-table-column>
              <el-table-column label="咨询师" prop="name" width="220" align="center"></el-table-column>
              <el-table-column label="状态" prop="status" width="190" fixed="right" align="center"
                               :filters="[{ text: '空闲', value: '空闲' }, { text: '忙碌', value: '忙碌' }]"
                               :filter-method="filterTag"
                               filter-placement="bottom-end">
                <template #default="scope">
                  <el-tag
                      :type="scope.row.status === '空闲' ? 'success' : 'danger'"
                      disable-transitions
                  >{{scope.row.status}}</el-tag>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
        <el-col :span="14">
          <el-row>
            <el-col :span="15"><div class="grid-content bg-purple">

              <el-card class="box-card">
                <table>
                  <tr>
                    <td style="font-family: 'Microsoft YaHei', sans-serif;font-weight: bold ">在线督导 </td>
                    <td style="width: 90px;">&nbsp;</td>
                    <td><el-pagination
                        background
                        layout="prev, pager, next"
                        :total="dataList.length"
                        :page-size="pageSize1"
                        @current-change="paging1"
                    >
                    </el-pagination></td>
                  </tr>
                </table>
                <el-table :data="dataList.slice((currentPage1-1)*pageSize1,currentPage1*pageSize1)" max-height="160">
                  <el-table-column  prop="userAvatar" width="50" align="center">
                    <template #default="scope" >
                      <el-avatar :src="scope.row.userAvatar"></el-avatar>
                    </template>
                  </el-table-column>
                  <el-table-column label="督导" prop="name" width="190" align="center"></el-table-column>
                  <el-table-column label="状态" prop="status" width="190" fixed="right" align="center"
                                   :filters="[{ text: '在线', value: '在线' }, { text: '忙碌', value: '忙碌' }]"
                                   :filter-method="filterTag"
                                   filter-placement="bottom-end">
                    <template #default="scope">
                      <el-tag
                          :type="scope.row.status === '在线' ? 'success' : 'danger'"
                          disable-transitions
                      >{{scope.row.status}}</el-tag
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </el-card>
            </div></el-col>
            <el-col :span="9" style="background-color: #2c3e50">

              <el-card class="box-card" style="background-color: #2c3e50; color: #ffffee; border:0">
                <p class="title2">当前会话数</p>
                <p class="digit2">{{consultSession}}</p>
              </el-card>
            </el-col>
          </el-row>
        </el-col>
      </el-row>



      <el-row :gutter="20">
        <el-col :span="11">
          <el-card class="box-card">
            <div id="myChart2"></div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="box-card" style="height: 440px">
            <template #header>
              <div class="card-header">
                <span>咨询排名</span>
              </div>
            </template>
            <el-table :show-header="false" :data="dataList3" row-style="height:60px">
              <el-table-column type="index"
                               :index="indexFn"
                               prop="id"
                               width="30" align="center">
              </el-table-column>
              <el-table-column  prop="userAvatar" width="50" align="center">
                <template #default="scope" >
                  <el-avatar :src="scope.row.userAvatar"></el-avatar>
                </template>
              </el-table-column>
              <el-table-column prop="name" width="120" align="center"></el-table-column>
              <el-table-column prop="score" width="120" align="center"></el-table-column>
            </el-table>
          </el-card>
        </el-col>
        <el-col :span="7">
          <el-card class="box-card" style="height: 440px">
            <template #header>
              <div class="card-header">
                <span>好评排名</span>
              </div>
            </template>
            <el-table :show-header="false" :data="dataList4" row-style="height:60px">
              <el-table-column type="index"
                               :index="indexFn"
                               prop="id"
                               width="30" align="center">
              </el-table-column>
              <el-table-column  prop="userAvatar" width="50" align="center">
                <template #default="scope" >
                  <el-avatar :src="scope.row.userAvatar"></el-avatar>
                </template>
              </el-table-column>
              <el-table-column prop="name" width="180" align="center"></el-table-column>
              <el-table-column prop="score" width="180" align="center"></el-table-column>
            </el-table>
          </el-card>
        </el-col>

      </el-row>

    </el-main>
  </el-container>
</template>

<script>
import { h, resolveComponent } from 'vue'
import { ElDivider } from 'element-plus'
const circleUrl = 'https://images.996pic.com/7021030b0ad843b9ab92571845d88fd1680_680.jpg'
export default {
  name: "AdminMe",
  data() {
    return {
      weekCountFlow:[],
      todayCountFlow:[],
      timeToday: 250,
      helpSession: 0,
      countToday: 3,
      consultSession: 0,
      size: 10,
      fit:'fill',
      rating:3.7,
      currentPage1:1,
      pageSize1:2,
      currentPage2:1,
      pageSize2:2,
      spacer: h(ElDivider, { direction: 'vertical',height:'5em' }),
      dataList:[

      ],
      dataList2:[

      ],
      dataList3:[
        {
          name:'JKL',
          userAvatar:circleUrl,
          score:574,
        },
        {
          name:'MING',
          userAvatar:circleUrl,
          score:573,
        },
        {
          name:'NING',
          userAvatar:circleUrl,
          score:572,
        },
        {
          name:'DOPA',
          userAvatar:circleUrl,
          score:571,
        },
        {
          name:'The Shy',
          userAvatar:circleUrl,
          score:570,
        }
      ],
      dataList4:[
        {
          name:'RUO',
          userAvatar:circleUrl,
          score:4.27,
        },
        {
          name:'XIYE',
          userAvatar:circleUrl,
          score:4.09,
        },
        {
          name:'MLXG',
          userAvatar:circleUrl,
          score:3.82,
        },
        {
          name:'BSYY',
          userAvatar:circleUrl,
          score:3.79,
        },
        {
          name:'销户',
          userAvatar:circleUrl,
          score:3.87,
        }
      ],
      page:0,
      dialogVisible:false,
      dialogVisible2:false,
      doctor: {},
      digit:16342,
      value: [2,4],
      monthcnt:5,
      searchForm:{},
      chartData1:[],
      chartData2:[],
      drawer: false,
      circleUrl:'https://images.996pic.com/7021030b0ad843b9ab92571845d88fd1680_680.jpg'
    }
  },
  async mounted() {
    //this.$root => app
    const _this = this
    await this.initChart('myChart2')
    let myChart = this.$echarts.init(document.getElementById("myChart"));
    // 绘制图表
    await _this.$axios.get('http://106.14.247.163:8080/admin/getInfo').then(resp=>{
      _this.todayCountFlow = resp.data.data.todayCountFlow
    })
    myChart.setOption({
      title: {text:"今日咨询量",left:"center",top:"top",textStyle:{fontFamily:"PingFang SC",fontSize:24}},
      tooltip: {},
      xAxis: {
        data: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24],
      },
      yAxis: {
     // 纵轴标尺固定
        type : 'value',
        max : 20,
        min : 0,
        splitNumber : 4,
      },
      series: [
        {
          name:'A',
          type: "line",
          symbol: 'none',
          smooth:true,
          data: _this.todayCountFlow,
          areaStyle: {
            color: 'orange',
            opacity: 0.4
          },
          itemStyle : {
            normal : {
              lineStyle:{
                width:1,//折线宽度
                color:"#ffaa00"//折线颜色
              }
            }
          },
        }
      ],
    });
    myChart.resize({
      height: 280,
      width : 1000
    })
  },methods:{
    paging1(val){
      const _this = this
      _this.currentPage1 = val
    },
    paging2(val){
      const _this = this
      _this.currentPage2 = val
    },
    async initChart(name){
      let myChart = this.$echarts.init(document.getElementById(name));
      // 绘制图表
      const _this = this
      await _this.$axios.get('http://106.14.247.163:8080/admin/getInfo').then(resp=>{
        _this.weekCountFlow = resp.data.data.weekCountFlow
        _this.countToday = resp.data.data.countToday
        _this.timeToday = resp.data.data.timeToday

      })
      myChart.setOption({
        title: {text:"七日咨询量",left:"center",top:"top",textStyle:{fontFamily:"PingFang SC",fontSize:24}},
        tooltip: {},
        xAxis: {
          data: _this.makeDateList() ,
        },
        yAxis: {
          // 纵轴标尺固定
          type : 'value',
          max : 20,
          min : 0,
          splitNumber : 5,
        },
        series: [
          {
            name:'A',
            type: "line",
            symbol: 'none',
            smooth:true,
            data: _this.weekCountFlow,
            areaStyle: {
              color: 'orange',
              opacity: 0.4
            },
            itemStyle : {
              normal : {
                lineStyle:{
                  width:1,//折线宽度
                  color:"#ffaa00"//折线颜色
                }
              }
            },
          }
        ],
      });
      myChart.resize({
        height: 400,
        width : 700
      })
    },
    makeDateList(){
      let l = []
      for(let i =6;i>=0;i--){
        let datetime = new Date()
        datetime = datetime.setDate(datetime.getDate()-i)
        datetime = new Date(datetime)
        const d = (datetime.getMonth()+1)+'-'+(datetime.getDate())
        l.push(d)
      }
      return l
    },
    filterTag(value, row) {
      return row.status === value
    },
    indexFn(index){
      index = (index+1)+(this.page)*10
      return index
    },
    EditPatients(s){

    },
    handleAdd(s){

    },

    handleQuery(id){

    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then((_) => {
            done()
          })
          .catch((_) => {})
    },


  },
  async created() {
    const _this = this
    await _this.$axios.get('http://106.14.247.163:8080/admin/getRanking').then(resp => {
      let res1 = resp.data.data.countRanking
      let res2 = resp.data.data.gradeRanking
      _this.dataList3 = []
      _this.dataList4 = []
      for (let item of res1){
        _this.dataList3.push({name:item.userName,userAvatar:circleUrl,score:item.count})
      }
      for (let item of res2){
        _this.dataList4.push({name:item.userName,userAvatar:circleUrl,score:item.grade})
      }
    })
    await _this.$axios.get('http://106.14.247.163:8080/consultant/getAllConsultants').then(resp=>{
      let res = resp.data.data
      _this.dataList2 = []
      for (let item of res) {
        if (item.state === '空闲') {
          _this.dataList2.push({name: item.userInfo.userName, userAvatar: circleUrl, status: item.state})
        }
      }
    })
    await _this.$axios.get('http://106.14.247.163:8080/supervisor/getAllSupervisors').then(resp=>{
      let res = resp.data.data
      _this.dataList = []
      for (let item of res){
        console.log(item.state)
        if(item.state==='在线'){
          _this.dataList.push({name:item.userInfo.userName,userAvatar:circleUrl,status:item.state})
        }
      }
    })

  }
}
</script>

<style lang="css" scoped>
.el-row {
  margin-bottom: 20px;
}

.el-row  :last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #f1f1f1;
}
.bg-purple {
  background: #f1f1f1;
}
.bg-purple-light {
  background: #f1f1f1;

}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.title1 {
  font-family: "PingFang SC",sans-serif;
  font-size: 16px;
  color: gray;
  line-height: 1.5;
  font-weight: normal;
}
.title2 {
  font-family: "PingFang SC",sans-serif;
  font-size: 16px;
  color: white;
  line-height: 1.0;
  font-weight: normal;
}
.digit1 {
  font-family: "Microsoft YaHei",sans-serif;
  font-weight: bold;
  font-size: 36px;
  line-height:2.0;
  color: #06386a;
}
.digit2 {
  font-family: "Microsoft YaHei",sans-serif;
  font-weight: bold;
  color: white;
  font-size: 48px;
  line-height:2.0;
}
.digit3{
  font-family: "Microsoft YaHei",sans-serif;
  font-weight: bold;
  font-size: 36px;
  line-height:2.5;
  color: #06386a;
}
.line1 {
  height: 400px;
}
#myChart {
  background: #ffffff;
}
.box-card /deep/ .el-calendar-table .el-calendar-day{
  height: 58px;
}
.table1 .td{
  padding: 0 !important;
  height: 40px;
  line-height: 40px;
}
.special{
  background-color: #081542;
}

.cardme{
  border:0;
}



.el-divider{
  display:inline-block;
  width:1px;
  height:5em;
  margin:0 8px;
  vertical-align:middle;
  position:relative;
}


</style>